<template>
  <div style="height: 100vh;" ref="container"></div>
</template>

<script lang="ts">
import {ref, defineComponent, onMounted} from 'vue'
import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh,
  TextureLoader,
  SphereGeometry,

} from 'three'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

export default defineComponent({
  setup() {
    const count = ref(0);
    const container = ref(null);

    onMounted(() => {

      if (container.value) {
        const containerDom = container.value as HTMLElement
        const scene = new Scene()
        // 透视摄像机
        const camera = new PerspectiveCamera(75, containerDom.clientWidth / containerDom.clientHeight, 0.1, 1000)
        const renderer = new WebGLRenderer()
        renderer.setSize(containerDom.clientWidth, containerDom.clientHeight,)
        containerDom.appendChild(renderer.domElement)

        const controls = new OrbitControls(camera, renderer.domElement);

        // const geometry = new BoxGeometry(1, 1, 1)
        // const material = new MeshBasicMaterial({
        //     color: '#00ff00'
        // })
        // const cube = new Mesh(geometry, material)
        // scene.add(cube)

        camera.position.z = 5

        const geometry = new SphereGeometry(1, 50, 50)
        const sphere = new Mesh(geometry)

        geometry.scale(1, 1, -1)

        const bg = new TextureLoader().load('/cc/8.webp')
        const sphereMaterial = new MeshBasicMaterial({map: bg})
        const _sphere = new Mesh(geometry, sphereMaterial)
        scene.add(_sphere)


        function animation() {
          requestAnimationFrame(animation)
          // cube.rotation.x += 0.01;
          // cube.rotation.y += 0.01;
          renderer.render(scene, camera)
        }

        animation()
      }
    })

    return {
      count,
      container,
    }
  }
})
</script>

<style scoped lang="less">

</style>
